import React from 'react';
import { Form, Input, Button, Space, Select, DatePicker } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';

//! form 嵌套表单 form list

const { Option } = Select
const formItemLayout = {
  labelCol: {
    xs: { span: 4 },
    sm: { span: 4 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 20 },
  },
};
const formItemLayoutWithOutLabel = {
  wrapperCol: {
    xs: { span: 24, offset: 0 },
    sm: { span: 20, offset: 4 },
  },
};

const areas = [
  { label: "Beijing", value: "Beijing" },
  { label: "Shanghai", value: "Shanghai" }
];

const type = [
  { text: "免费", value: "free" },
  { text: "付费", value: "unfree" }
];

const sights = {
  Beijing: ["Tiananmen", "Great Wall"],
  Shanghai: ["Oriental Pearl", "The Bund"]
};


const DynamicFieldSet = () => {
  const [form] = Form.useForm();
  const onFinish = (values) => {
    console.log('Received values of form:', values, form);
  };

  
  const handleChange = () => {
  };

  const handleFieldsChange = (field, allField) => {
    console.log("handleFieldsChange---1", field, allField);
    const allFormData = form.getFieldsValue()
    console.log("handleFieldsChange---2", field, allField, allFormData);
  };
  return (
    <Form name="dynamic_form_item" {...formItemLayoutWithOutLabel} onFinish={onFinish} onFieldsChange={handleFieldsChange} form={form}>



    <Form.List
      name="params"
      rules={[
        {
          validator: async (_, names) => {
            if (!names || names.length < 1) {
              return Promise.reject(new Error('At least 2 passengers'));
            }
          },
        },
      ]}
    >
      {(fields, { add, remove }, { errors }) => (
        <>
          {fields.map((field, index) => {
            return <>
              <Form.Item
                {...formItemLayoutWithOutLabel}
                label={`father-${index}`}
                required={false}
                key={field.key}
              >
                <Form.Item
                  {...field}
                  validateTrigger={['onChange', 'onBlur']}
                  name={[field.name, 'city']}
                  noStyle
                >
                  <Input placeholder="passenger name" style={{ width: '60%' }} />
                </Form.Item>


                <Form.Item shouldUpdate={(prevValues, curValues) => {
                      console.log('shouldUpdate', prevValues, curValues)
                      return prevValues?.params[`${field.name}`]?.city === curValues?.params[`${field.name}`]?.city || prevValues?.params[`${field.name}`]?.cityInfo === curValues?.params[`${field.name}`]?.cityInfo || prevValues?.params[`${field.name}`]?.cityInfo[`a${field.name}`].price === curValues?.params[`${field.name}`]?.cityInfo[`a${field.name}`].price
                    }}>
                    {() => {
                      return (
                        <Form.List
                        name={[field.name, "childParams"]}
                        key={field.key}
                        rules={[
                          {
                            validator: async (_, names) => {
                              if (!names || names.length < 1) {
                                return Promise.reject(new Error('At least 2 passengers'));
                              }
                            },
                          },
                        ]}
                      >
                        {(childFields, { add: childAdd, remove: childRemove }, { errors: childErrors }) => (
                          <>
                            {childFields.map((childField, childIndex) => {
                              return <>
                                <Form.Item
                                  {...(childIndex === 0 ? formItemLayout : formItemLayout)}
                                  label={`child-${childIndex}`}
                                  required={false}
                                  key={childField.key}
                                >
                                  <Form.Item
                                    {...childField}
                                    validateTrigger={['onChange', 'onBlur']}
                                    name={[childField.name, 'sight']}
                                    noStyle
                                  >
                                    <Input placeholder="passenger name" style={{ width: '60%' }} />
                                  </Form.Item>
                  
                                  {fields.length > 1 ? (
                                    <MinusCircleOutlined
                                      className="dynamic-delete-button"
                                      onClick={() => childRemove(field.name)}
                                    />
                                  ) : null}
                                </Form.Item>
                              </>
                            })}
                            <Form.Item>
                              <Button
                                type="dashed"
                                onClick={() => childAdd()}
                                style={{ width: '60%' }}
                                icon={<PlusOutlined />}
                              >
                                添加子级表单
                              </Button>
                              <Form.ErrorList errors={childErrors} />
                            </Form.Item>
                          </>
                        )}
                      </Form.List>
                      );
                    }}
                  </Form.Item>


                {fields.length > 1 ? (
                  <MinusCircleOutlined
                    className="dynamic-delete-button"
                    onClick={() => remove(field.name)}
                  />
                ) : null}
              </Form.Item>
            </>
          })}
          <Form.Item>
            <Button
              type="dashed"
              onClick={() => add()}
              style={{ width: '60%' }}
              icon={<PlusOutlined />}
            >
              添加父级表单
            </Button>
            <Form.ErrorList errors={errors} />
          </Form.Item>
        </>
      )}
    </Form.List>



    <Form.Item>
      <Button type="primary" htmlType="submit">
        Submit
      </Button>
    </Form.Item>
  </Form>
);
};

export default DynamicFieldSet;